<template>
    <el-dialog title="新 增" :visible.sync="thisAddPage" :before-close="handleClose">
        <el-form ref="categoryFrom" :model="categoryFrom" label-width="135px" :rules="rules">
        <el-form-item label="分类名称"  prop="categoryName">
            <el-input  v-model="categoryFrom.categoryName" placeholder="请输入分类名称" clearable style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="分类编码"  prop="categoryCode">
            <el-input  v-model="categoryFrom.categoryCode" placeholder="请输入分类编码" clearable style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="是否启用"  prop="isEnable">
            <el-radio v-model="categoryFrom.isEnable" label="0">否</el-radio>
            <el-radio v-model="categoryFrom.isEnable" label="1">是</el-radio>
        </el-form-item>
        <el-form-item label="分类类型"  prop="categoryType">
            <el-select v-model="categoryFrom.categoryType" placeholder="请选择分类类型" @change="selectCategoryType">
                  <el-option label="一级" :value="1"></el-option>
                  <el-option label="二级" :value="2"></el-option>
                  <el-option label="三级" :value="3"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="一级分类"  prop="firstLevelId" v-show="showFirstCategory">
            <el-select v-model="categoryFrom.firstLevelId" placeholder="请选择一级分类" @change="selectFirstCategory">
                <el-option v-for="item in firstCategoryList" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="二级分类"  prop="secondLevelId" v-show="showSecondCategory">
            <el-select v-model="categoryFrom.secondLevelId" placeholder="请选择二级分类">
                <el-option v-for="item in secondCategoryList" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="categoryFrom.remark" style="width:80%" placeholder="请输入备注" clearaable></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('categoryFrom')">保存</el-button>
            <el-button @click="resetForm('categoryFrom')">重 置</el-button>
            <el-button @click="closeAddChange">取 消</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import { save, findAllFirstList, findAllSecondList } from '@api/product/productCategory'
export default {
  data () {
    return {
      thisAddPage: this.addPage,
      categoryFrom: {
        id: '',
        categoryName: '',
        categoryCode: '',
        isEnable: '0',
        categoryType: '',
        firstLevelId: '',
        secondLevelId: '',
        remark: ''
      },
      firstCategoryList: [],
      secondCategoryList: [],
      showFirstCategory: false,
      showSecondCategory: false,
      rules: {
        categoryName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
        ],
        categoryCode: [
          { required: true, message: '请输入分类编码', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
        ],
        categoryType: [
          { required: true, message: '请选择分类类型', trigger: 'change' }
        ],
        remark: [
          { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  /** 双向绑定 start */
  props: ['addPage'],
  watch: {
    addPage (val) {
      this.thisAddPage = val// ②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
    },
    thisAddPage (val) {
      this.$emit('on-addPage-change', val)// ③组件内对myResult变更后向外部发送事件通知
    }
  },
  /** 双向绑定 end */
  methods: {
    closeAddChange () {
      this.thisAddPage = !this.thisAddPage
      this.$refs['categoryFrom'].resetFields();
	  this.showFirstCategory = false;
	  this.showSecondCategory = false;
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.categoryFrom.categoryType == 2) {
            if (this.categoryFrom.firstLevelId == '') {
              this.$message({
                message: '请选择一级分类',
                type: 'fail'
              })
              return false
            }
          } else if (this.categoryFrom.categoryType == 3) {
            if (this.categoryFrom.firstLevelId == '') {
              this.$message({
                message: '请选择一级分类',
                type: 'fail'
              })
              return false
            }
            if (this.categoryFrom.secondLevelId == '') {
              this.$message({
                message: '请选择二级分类',
                type: 'fail'
              })
              return false
            }
          }
          this.loading = true
          save(this.categoryFrom).then(res => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.$emit('on-loadlist-change')// ③组件内对myResult变更后向外部发送事件通知
            this.loading = false
            this.closeAddChange()
          }).catch(err => {
            console.log('err', err)
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
	  this.showFirstCategory = false;
	  this.showSecondCategory = false;
    },
    handleClose (done) {
      this.$confirm('确定关闭吗？').then(() => {
        done()
        this.$refs['categoryFrom'].resetFields()
      }).catch(() => {

      })
    },
    fetchData () {
      this.loading = true
    },
    emptyData () {
      this.categoryFrom.firstLevelId = ''
      this.categoryFrom.secondLevelId = ''
      this.firstCategoryList = []
      this.secondCategoryList = []
    },
    selectCategoryType (value) {
      if (value == 2) {
        this.emptyData()
        // 展示一级分类、取消二级分类
        this.showFirstCategory = true
        this.showSecondCategory = false
        this.getAllFirstList()
      } else if (value == 3) {
        this.emptyData()
        // 展示一二级分类
        this.showFirstCategory = true
        this.showSecondCategory = true
        this.getAllFirstList()
      } else {
        this.emptyData()
        // 取消一二级分类
        this.showFirstCategory = false
        this.showSecondCategory = false
      }
    },
    getAllFirstList () {
      this.loading = true
      findAllFirstList({

      }).then(res => {
        this.firstCategoryList = res.data
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    selectFirstCategory (value) {
      this.getAllSecondList(value)
    },
    getAllSecondList (firstLevelId) {
      this.loading = true
      findAllSecondList({
        firstLevelId: firstLevelId
      }).then(res => {
        this.secondCategoryList = res.data
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    }
  },
  created () {

  },
  mounted () {
    this.fetchData()
  },
  computed: {

  }
}
</script>
